<!-- 首页 -->
<template>
	<div class="home">
		<TopBar :left="false" titles="首页"></TopBar>
		<!-- 轮播 -->
		<van-row class="rotate">
			<van-col span="24">
				<van-swipe :autoplay="3000">
					<van-swipe-item v-for="(image, index) in images" :key="index">
						<van-image width="80%" :src="image">
							<!-- 加载中提示 -->
							<template v-slot:loading>
							    <van-loading type="spinner" size="20" />
							  </template>
						</van-image>
					</van-swipe-item>
				</van-swipe>
			</van-col>
		</van-row>
		<!-- 分类菜单 -->
		<van-row class="classify">
			<van-col span="24">
				<van-col span="24">
					<van-grid :column-num="5" square :gutter="10">
					  <van-grid-item v-for="c of claMenu"
					  :key="c.id" @click="toClassify(c.id)">
						<van-icon :name="c.icon" size="35px" color="red"/>
						<span class="classify-name">{{c.cname}}</span>
					  </van-grid-item>
					</van-grid>
				</van-col>
			</van-col>
		</van-row>
		<!-- 拼团商品 -->
		<van-row >
			<div 
			v-for="gShop of groupItem"
			:key="gShop.id"
			@click="toProductDetail(gShop.id)">
				<GroupItem :item="gShop"></GroupItem>
			</div>
			
		</van-row>
		<!-- 底部结尾线 -->
		<BottomLine></BottomLine>
		
		<!-- 底部菜单 -->
		<BottomBar></BottomBar>
	</div>
</template>

<script>
	// 引用的组件
	import allComponent from '../util/allComponent.js'
	
	export default {
		name: 'Home',
		data: function() {
			return {
				
			}
		},
		computed: {
			// 轮播的图片
			images(){
				return this.$store.state.xuzhaofei.images;
			},
			// 分类菜单
			claMenu(){
				return this.$store.state.category;
			},
			// 拼团商品
			groupItem(){
				return this.$store.state.group;
			}
				
		},
		methods: {
			toProductDetail(id){
				this.$router.push({name:'productDetails',params:{shopId:id}})
			},
			toClassify(cid){
				this.$router.push({name:'classification',params:{cid:cid}})
			}
		},
		mounted() {

		},
		components:{
			GroupItem : allComponent.GroupItem,
			BottomLine : allComponent.BottomLine,
			TopBar : allComponent.TopBar,
			BottomBar : allComponent.BottomBar,
		}
	}
</script>

<style scoped="scoped">
	.home{
		padding-bottom: 5.5rem;
		text-align: center;
	}
	.rotate {
		padding: 5px;
		background-color: #fff;
	}
	.my-swipe .van-swipe-item {
		color: #fff;
		font-size: 20px;
		line-height: 150px;
		text-align: center;
		background-color: #39a9ed;
	}
	.classify {
		margin: 10px 0;
	}
	.classify-name {
		font-size: 0.75rem;
		white-space: nowrap;
	}
</style>
